import React from 'react';
import { Collapse, Button } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { ToolModuleResponseItemType } from '../tools/constants';
import { SvgIcon } from '@/components/icon';
import { useCopyData } from '@/hooks/use-copydata';
import '../styles/collapse.css';
import AvatarDisplay from '@/components/work-modal/components/AvatarDisplay';

interface ToolCallCollapseProps {
  id: string;
  tool: ToolModuleResponseItemType;
  functionName: string;
  params: any;
  response: any;
}

const ToolCallCollapse: React.FC<ToolCallCollapseProps> = ({ id, tool, functionName, params, response }) => {
  const isLoading = !response;
  const { copyData } = useCopyData();

  const handleCopy = (content: any, type: 'input' | 'response') => {
    const contentText = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
    copyData(contentText, `${type === 'input' ? '输入' : '响应'}内容已复制`);
  };

  const renderContentBox = (title: string, content: any, type: 'input' | 'response') => {
    const contentText = typeof content === 'string' ? content : JSON.stringify(content, null, 2);

    return (
      <div className="border border-[#E5E6EB] bg-[#F7F8FA] pt-2 rounded-[6px]">
        <div className="flex items-center justify-between border-b border-[#E5E6EB] pb-2 px-4">
          <div className="font-bold text-[#1D2129]">{title}</div>
          <Button
            type="text"
            size="small"
            className="flex items-center gap-1 text-[#1B6DFA] hover:text-[#1B6DFA] hover:bg-[#1B6DFA0A]"
            onClick={() => handleCopy(content, type)}
            icon={<SvgIcon icon="ai-chat-copy" size="14" />}
          >
            复制
          </Button>
        </div>
        <div className="bg-white rounded-lg border-none py-3 px-4">
          <pre className="text-xs overflow-x-auto whitespace-pre-wrap break-words m-0 font-mono">
            {contentText}
          </pre>
        </div>
      </div>
    );
  };

  return (
    <Collapse
      style={{ marginBottom: '11px', display: `${params ? 'block' : 'none'}` }}
      expandIconPosition={'end'}
      expandIcon={({ isActive }) =>
        isActive ? (
          <SvgIcon icon="ai-chat-down" size="12" />
        ) : (
          <SvgIcon icon="ai-chat-right" size="12" />
        )
      }
      accordion={true}
      className="!border-none !bg-[#00134D0A] !border-radius-[12px] !p-0 rg-custom-collapse">
      <Collapse.Panel
        className="!border-none !bg-transparent !p-0 rg-custom-collapse"
        header={
          <span className="flex items-center">
            {tool?.toolName && tool?.toolName != tool?.functionName ?
              <div className="flex items-center">
                {tool?.toolAvatar && (
                  <AvatarDisplay
                    src={tool?.toolAvatar}
                    className="w-5 h-5 ml-2"
                    size={20}
                  />
                )}
                <span className="font-normal text-[14px] text-[#1D2129] ml-1">
                  调用 MCP
                  <span className="font-semibold text-[14px] text-[#1D2129] ml-1">
                    {tool?.toolName}
                  </span>
                </span>
              </div>
              : `API ${functionName || id} 调用`}
            {isLoading && (
              <span style={{ marginLeft: '8px' }}>
                <LoadingOutlined style={{ fontSize: '14px' }} spin />
              </span>
            )}
          </span>
        }
        key="1"
      >
        <div className="p-0">
          {renderContentBox('Input', params, 'input')}
          <div className="my-2"></div>
          {response && renderContentBox('Response', response, 'response')}
        </div>
      </Collapse.Panel>
    </Collapse>
  );
};

export default ToolCallCollapse; 